<template>
  <div style="height: 100%; background-color: #ffffff">
    <cheader :title="title" color="#333333"></cheader>
    <div class="main_box">
      <div class="content_parent">
        <div class="content">
          <div class="title_icon">
            <!-- <div style="margin-right:20px">头像:</div> -->
            <!-- <el-avatar
              :size="120"
              :src="userInfo.avatarPath"
              @error="errorHandler"
            >
            </el-avatar> -->

            <img
              :src="avatarPath"
              alt="头像"
              width="120px"
              height="120px"
              v-if="avatarPath"
            />
            <img
              src="../../assets/default-men.png"
              alt="头像"
              width="120px"
              height="120px"
              v-else-if="!avatarPath && userInfo.gender === 1"
            />
            <img
              src="../../assets/default-women.png"
              alt="头像"
              width="120px"
              height="120px"
              v-else-if="!avatarPath && userInfo.gender === 2"
            />
          </div>
          <!-- 右侧个人信息列表部分 -->
          <div class="content_right">
            <div class="item">
              <span class="item_title">账号信息</span>
              <div class="item_content">
                <el-row>
                  <el-col :span="12">
                    <p><span>登陆账号:</span> {{ userInfo.userName }}</p>
                  </el-col>
                  <el-col :span="12"
                    ><p>
                      <span>用户昵称:</span> {{ userInfo.nickName }}
                    </p></el-col
                  >
                </el-row>
              </div>
            </div>
            <div class="item">
              <span class="item_title">个人信息</span>
              <div class="item_content">
                <el-row>
                  <el-col :span="12">
                    <p><span>员工姓名:</span> {{ userInfo.emplName }}</p>
                    <p>
                      <span>员工性别:</span>
                      <span v-if="userInfo.gender == 0">未知</span>
                      <span v-if="userInfo.gender == 1">男</span>
                      <span v-if="userInfo.gender == 2">女</span>
                    </p>
                    <p><span>民族:</span> {{ userInfo.nation }}</p>
                    <p>
                      <span>婚姻状况:</span>
                      <i v-if="userInfo.marriageStatus == 0">未知</i>
                      <i v-if="userInfo.marriageStatus == 1">已婚</i>
                      <i v-if="userInfo.marriageStatus == 2">未婚</i>
                    </p>
                    <p><span>毕业院校:</span> {{ userInfo.school }}</p>
                    <p>
                      <span>最高学历:</span>
                      <i v-if="userInfo.education == 0">未知</i>
                      <i v-if="userInfo.education == 1">博士</i>
                      <i v-if="userInfo.education == 2">硕士</i>
                      <i v-if="userInfo.education == 3">本科</i>
                      <i v-if="userInfo.education == 4">专科</i>
                      <i v-if="userInfo.education == 5">高中</i>
                      <i v-if="userInfo.education == 6">初中</i>
                      <i v-if="userInfo.education == 7">小学</i>
                    </p>
                    <p><span>籍贯:</span> {{ userInfo.nativePlace }}</p>
                  </el-col>
                  <el-col :span="12">
                    <p><span>出生年月:</span> {{ userInfo.birthday | formatDate('yyyy-MM-dd') }}</p>
                    <p>
                      <span>政治面貌:</span>
                      <i v-if="userInfo.politicalStatus == 0">未知</i>
                      <i v-if="userInfo.politicalStatus == 1">群众</i>
                      <i v-if="userInfo.politicalStatus == 2">党员</i>
                      <i v-if="userInfo.politicalStatus == 3">预备党员</i>
                      <i v-if="userInfo.politicalStatus == 4">团员</i>
                    </p>
                    <p>
                      <span>血型:</span>
                      <i v-if="userInfo.bloodType == 0">未知</i>
                      <i v-if="userInfo.bloodType == 1">A型</i>
                      <i v-if="userInfo.bloodType == 2">B型</i>
                      <i v-if="userInfo.bloodType == 3">O型</i>
                      <i v-if="userInfo.bloodType == 4">AB型</i>
                    </p>
                    <p>
                      <span>健康状况:</span>
                      <i v-if="userInfo.healthStatus == 0">未知</i>
                      <i v-if="userInfo.healthStatus == 1">良好</i>
                      <i v-if="userInfo.healthStatus == 2">疾病</i>
                    </p>
                    <p><span>所学专业:</span> {{ userInfo.major }}</p>
                    <p><span>身份证号码:</span> {{ userInfo.idCard }}</p>
                    <p><span>参加工作时间:</span> {{ userInfo.workingTime | formatDate('yyyy-MM-dd') }}</p>
                  </el-col>
                </el-row>
              </div>
            </div>
            <div class="item">
              <span class="item_title">公司信息</span>
              <div class="item_content">
                <el-row>
                  <el-col :span="12">
                    <p><span>工作证号:</span> {{ userInfo.workNum }}</p>
                    <p><span>入厂时间:</span> {{ userInfo.entryTime | formatDate('yyyy-MM-dd') }}</p>
                    <p><span>所属部门:</span> {{ userInfo.deptName }}</p>
                    <p><span>家庭联系电话:</span> {{ userInfo.homePhone }}</p>
                  </el-col>
                  <el-col :span="12">
                    <p><span>现任职务:</span> {{ userInfo.positionName }}</p>
                    <p><span>所属岗位:</span> {{ userInfo.positionName }}</p>
                    <p><span>手机号码:</span> {{ userInfo.mobile }}</p>
                  </el-col>
                </el-row>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="content_line"></div>
      <div style="text-align: center; margin-top: 30px">
        <el-button v-auth="'C01001'" class="edit" type="primary" @click="edit"
          >编辑</el-button
        >
      </div>
    </div>
  </div>
</template>

<script>
import cheader from '@/components/header.vue';
import { createUser } from '@/api/permission';
import { getUser, getAvatar } from '@/api';
export default {
  props: {
    title: {
      type: String,
      default: '员工档案',
    },
    path: {
      type: String,
    },
  },
  data() {
    return {
      userInfo: {},
      avatarPath: '',
      userForm: {
        avatarPath: '',
        emplName: '',
        nickName: '',
        userName: '',
        gender: '',
        birthday: '',
        politicalStatus: '',
        bloodType: '',
        marriageStatus: '',
        healthStatus: '',
        education: '',
        major: '',
        workNum: '',
        nativePlace: '',
        entryTime: '',
        positionId: '',
        workingTime: '',
        school: '',
        homePhone: '',
        mobile: '',
        homeAddress: '',
        telephone: '',
        idCard: '',
      },
      genderList: [
        {
          value: 0,
          label: '未知',
        },
        {
          value: 1,
          label: '男',
        },
        {
          value: 2,
          label: '女',
        },
      ],
      bloodTypeList: [
        {
          value: 0,
          label: '未知',
        },
        {
          value: 1,
          label: 'A',
        },
        {
          value: 2,
          label: 'B',
        },
        {
          value: 3,
          label: 'O',
        },
        {
          value: 4,
          label: 'AB',
        },
      ],
      educationList: [
        {
          value: 0,
          label: '未知',
        },
        {
          value: 1,
          label: '博士',
        },
        {
          value: 2,
          label: '硕士',
        },
        {
          value: 3,
          label: '本科',
        },
        {
          value: 4,
          label: '专科',
        },
        {
          value: 5,
          label: '高中',
        },
        {
          value: 6,
          label: '初中',
        },
        {
          value: 7,
          label: '小学',
        },
      ],
      healthStatusList: [
        {
          value: 0,
          label: '未知',
        },
        {
          value: 1,
          label: '良好',
        },
        {
          value: 2,
          label: '疾病',
        },
      ],
      marriageStatusList: [
        {
          value: 0,
          label: '未知',
        },
        {
          value: 1,
          label: '已婚',
        },
        {
          value: 2,
          label: '未婚',
        },
      ],
      politicalStatusList: [
        {
          value: 0,
          label: '未知',
        },
        {
          value: 1,
          label: '群众',
        },
        {
          value: 2,
          label: '党员',
        },
        {
          value: 3,
          label: '预备党员',
        },
        {
          value: 4,
          label: '团员',
        },
      ],
      rules: {
        avatar: [{ required: true, message: '头像不能为空' }],
        emplName: [{ required: true, message: '姓名不能为空' }],
      },
      userId: '',
    };
  },
  created() {
    this.userId = this.$route.query.id || 'token';
    this.getUser();
    this.getAvatar();
  },
  components: {
    cheader,
  },
  methods: {
    async getUser() {
      const res = await getUser(this.userId);
      if (res.code == 200) {
        const temp = res.data;
        this.userInfo = Object.assign({}, temp);
      }
    },
    async getAvatar() {
      const res = await getAvatar();
      if (res) {
        this.avatarPath = `data:image/jpg;base64,${res}`;
      } else {
        this.avatarPath = '';
      }
    },
    changeWorkingTime(val) {
      this.userForm.workingTime = val;
    },
    changeEntryTime(val) {
      this.userForm.entryTime = val;
    },
    changeEducation(val) {
      this.userForm.education = val;
    },
    changeHealthStatus(val) {
      this.userForm.healthStatus = val;
    },
    changeMarriageStatus(val) {
      this.userForm.marriageStatus = val;
    },
    changeBloodType(val) {
      this.userForm.bloodType = val;
    },
    changeGender(val) {
      this.userForm.gender = val;
    },
    changePoliticalStatus(val) {
      this.userForm.politicalStatus = val;
    },
    changeBirthday(val) {
      this.userForm.birthday = val;
    },
    async createUser() {
      const res = await createUser({
        // avatarPath: '',
        birthday: this.userForm.birthday,
        bloodType: this.userForm.bloodType,
        education: this.userForm.education,
        emplName: this.userForm.emplName,
        entryTime: this.userForm.entryTime,
        gender: this.userForm.gender,
        healthStatus: this.userForm.healthStatus,
        homeAddress: this.userForm.homeAddress,
        homePhone: this.userForm.homePhone,
        idCard: this.userForm.idCard,
        major: this.userForm.major,
        marriageStatus: this.userForm.marriageStatus,
        mobile: this.userForm.mobile,
        nation: this.userForm.nation,
        nativePlace: this.userForm.nativePlace,
        nickName: this.userForm.nickName,
        openId: this.userForm.openId,
        password: this.userForm.politicalStatus,
        politicalStatus: this.userForm.politicalStatus,
        positionId: this.userForm.positionId,
        remark: this.userForm.remark,
        school: this.userForm.school,
        deptName: this.userForm.deptName,
        telephone: this.userForm.telephone,
        userName: this.userForm.userName,
        workNum: this.userForm.workNum,
        workingTime: this.userForm.workingTime,
      });
      if (res.code == 200) {
        this.$message({
          type: 'success',
          message: '新增成功',
        });
      }
    },
    reset() {
      this.userForm.emplName = '';
      this.userForm.gender = '';
      this.userForm.birthday = '';
      this.userForm.politicalStatus = '';
      this.userForm.bloodType = '';
      this.userForm.marriageStatus = '';
      this.userForm.healthStatus = '';
      this.userForm.education = '';
      this.userForm.major = '';
      this.userForm.workNum = '';
      this.userForm.nativePlace = '';
      this.userForm.entryTime = '';
      this.userForm.positionId = '';
      this.userForm.deptName = '';
      this.userForm.workingTime = '';
      this.userForm.school = '';
      this.userForm.homePhone = '';
      this.userForm.mobile = '';
      this.userForm.homeAddress = '';
      this.userForm.idCard = '';
    },
    getValueByLabel(value, objArr) {
      return objArr.find((item) => item.value === value).label;
    },
    getLabelByValue(label, objArr) {
      return objArr.find((item) => item.label === label).value;
    },
    edit() {
      this.$router.push({
        path: '/archives/createUser',
        query: {
          userInfo: encodeURIComponent(JSON.stringify(this.userInfo)),
          type: 2
        },
      });
    },
    // async getUser() {
    //   const res = await getUser()
    //   if (res.code == 200) {
    //     this.userInfo = res.data
    //     this.userForm.avatar = this.userInfo.avatarPath
    //     this.userForm.emplName = this.userInfo.emplName
    //     this.userForm.gender = this.getValueByLabel(this.userInfo.gender,this.genderList)
    //     this.userForm.birthday = this.userInfo.birthday
    //     this.userForm.nation = this.userInfo.nation
    //     this.userForm.politicalStatus = this.getValueByLabel(this.userInfo.politicalStatus,this.politicalStatusList)
    //     this.userForm.bloodType = this.getValueByLabel(this.userInfo.bloodType,this.bloodTypeList)
    //     this.userForm.marriageStatus = this.getValueByLabel(this.userInfo.marriageStatus,this.marriageStatusList)
    //     this.userForm.healthStatus = this.getValueByLabel(this.userInfo.healthStatus,this.healthStatusList)
    //     this.userForm.education = this.getValueByLabel(this.userInfo.education,this.educationList)
    //     this.userForm.major = this.userInfo.major
    //     this.userForm.positionId = this.userInfo.positionId
    //     this.userForm.workNum = this.userInfo.workNum
    //     this.userForm.nativePlace = this.userInfo.nativePlace
    //     this.userForm.entryTime = this.userInfo.entryTime
    //     this.userForm.positionId = this.userInfo.positionId
    //     this.userForm.teamId = this.userInfo.teamId
    //     this.userForm.workingTime = this.userInfo.workingTime
    //     this.userForm.school = this.userInfo.school
    //     this.userForm.homePhone = this.userInfo.homePhone
    //     this.userForm.mobile = this.userInfo.mobile
    //     this.userForm.homeAddress = this.userInfo.homeAddress
    //     this.userForm.idCard = this.userInfo.idCard
    //   }
    //   console.log('userInfo', this.userInfo)
    // },
    // submitForm(formName) {
    //   this.$refs[formName].validate((valid) => {
    //     if (valid) {
    //       alert('submit!')
    //     } else {
    //       console.log('error submit!!')
    //       return false
    //     }
    //   })
    // },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    errorHandler() {
      return true;
    },
  },
};
</script>

<style lang="scss" scoped>
.main {
  width: 90%;
  // height: 620px;
  background: #fff;
  margin-left: 5%;
  overflow: scroll;
  position: relative;
  .edit {
    position: absolute;
    top: 20px;
    right: 20px;
    width: 80px;
    height: 35px;
  }
  .main-c {
    margin: 20px auto;
    width: 45%;
    height: 100%;
    line-height: 50px;

    span {
      font-weight: 600;
      // padding-right: 50px;
    }
    i {
      font-style: normal;
    }
  }
}
.main_box {
  padding: 20px 0;
  width: 100%;
  background: #fff;
}
.content_parent {
  // text-align: ;
  display: flex;
  justify-content: center;
}
.content_line {
  width: 93%;
  height: 2px;
  margin: 0 3%;
  background: #f6f6f6;
}
.content {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  width: 80%;

  .title_icon {
    width: 120px;
    height: 120px;
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-end;
    margin-right: 50px;
    flex: 1;
  }

  .content_right {
    flex: 400px;
  }
}
.item_title {
  width: 71px;
  height: 18px;
  font-size: 18px;
  font-family: SourceHanSansCN-Bold, SourceHanSansCN;
  font-weight: bold;
  color: #269cff;
  line-height: 27px;
}
.item_content {
  border-top: 1px solid #269cff;
  padding-top: 10px;
  i{
    font-style: normal;
  }
}
.item {
  margin-bottom: 20px;
}
p {
  line-height: 2;
}
span {
  margin-right: 10px;
}
</style>
